<template>
	<div class="zuhe_jilu_box">
		<ul class="zhengjilu_ul">
			<li class="zhengjilu_li" v-for="(val,item,index) in periodslist" :key="index">
				<div class="zhengjilu_qishu">
					<span>第{{item}}期</span>
				</div>
				<ul class="qishu_ul">
					<li class="qishu_li" v-for="(itemm,index) in val" :key="index">
						<div class="qishu_li_left">
							<p>{{itemm.num_str}}</p>
							<p>{{itemm.play_type}}</p>
							<p>{{itemm.created_at}}</p>
						</div>
						<div class="qishu_li_right qishu_li_right1">
							<span class="zhong_color_red" v-if="itemm.status === 1">{{itemm.is_winning===0?'未中奖':'中奖'}}</span>
							<span class="zhong_color_red" v-else>未开奖</span>
							<div class="qishu_li_right2">
								<p v-if="!isMultiple">{{itemm.multiple}}倍{{itemm.bet_num}}注</p>
								<p v-else>{{itemm.bet_num}}注</p>
								<b class="color_red">{{itemm.total_amount}}元</b>
							</div>
						</div>
					</li>
				</ul>
			</li>
		</ul>
		<div class="nodata" v-if="periodslist.length==0">
			<i class="nodata_i">
				<img src="../../../assets/images/caipiao/nodata.png" />
			</i>
			
		</div>
	</div>
</template>

<script>
	export default {
		props: {
      info: String,
      isMultiple: {
        type: Boolean,
        default(){
          return false
        }
      }
		},

		data() {
			return {
				periodslist: [],
				arrlist: {
					"五星直选复式": 1,
					"五星直选单式": 2,
					"五星直选组合": 3,
					"前三直选复式": 4,
					"前三直选单式": 5,
					"前三直选和值": 6,
					"中三直选复式": 7,
					"中三直选单式": 8,
					"中三直选和值": 9,
					"后三直选复式": 10,
					"后三直选单式": 11,
					"后三直选和值": 12,
					"趣味一帆风顺": 13,
					"趣味好事成双": 14,
					"趣味三星报喜": 15,
					"趣味四季发财": 16,
					"整合": 17,
					"龙虎斗": 18,
					"全5中1": 19,
				}
			};
		},
		// 渲染之前
		created() {
			console.log(this.$store.state.current_play_type)
			let idx = this.$store.state.current_play_type
			console.log(this.arrlist[idx])
			this.http
				.get("/api/bet/record?play_type=" + this.arrlist[idx])
				.then(res => {
					console.log(res.data);
					if(res.status_code == 200) {
						this.periodslist = res.data;
					} else {
						this.periodslist=[]
					}
				})
		}

	};
</script>

<style>
	.zuhe_jilu_box {
		background-color: #fff;
		height: 100vh;
	}

	@import url("../../../assets/css/ttcp/xuanhao.css");
	.qishu_li_left p:nth-child(2) {
		margin: 0.2rem 0;
	}

	.qishu_li_right span:first-child {
		padding-top: 0.33rem;
	}

	.qishu_li_right1 span:first-child {
		padding-top: 0.33rem;
	}

	.nodata {
		width: 100%;
		text-align: center;
		display: inline-block;
		margin: 3rem auto;
		
	}
	.nodata_i{width: 4rem;height: 3rem;display: block;margin: 0 auto;}
	.nodata img{width: 100%;height: 100%;}
	.qishu_ul .qishu_li .qishu_li_left{width: 70%;}
	.qishu_ul .qishu_li .qishu_li_left p{width: 100%;white-space:normal; word-break:break-all;}
</style>
